<template>
    <div class="register">
      <div class="title">注册页</div>
      <van-form @submit="register">
        <van-field
          v-model="formData.phone"
          name="输入手机号"
          :rules="[{ required: true, message: '请输入手机号' }]"
        />
        <van-field
          v-model="formData.pass"
          type="password"
          placeholder="输入密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <van-field
          v-model="formData.checkpass"
          type="password"
          placeholder="输入确认密码"
          :rules="[{ required: true, message: '请填写确认密码' }]"
        />
        <div class="btn">
          <van-button round block type="info" native-type="submit"
            >注册</van-button
          >
        </div>
      </van-form>
    </div>
  </template>
  
  <script>
  import { Toast } from 'vant';
  import { user_register } from '../utils/api'
  export default {
    data() {
      return {
        formData: {
          phone: "",
          pass: "",
          checkpass: "",
        },
      };
    },
    methods: {
      register() {
        if (/^1[3-9]\d{9}$/.test(this.formData.phone) == false) {
          alert("请输入合法的手机号");
        } else if (!this.formData.pass || !this.formData.checkpass) {
          alert("请输入密码/确认密码");
        } else if (this.formData.pass !== this.formData.checkpass) {
          alert("密码和确认密码不一致");
        } else {
          var newFormData = JSON.parse(JSON.stringify(this.formData));
          delete newFormData.checkpass;
          user_register(newFormData).then((res) => {
            if (res.data.code == 200) {
              Toast.success("注册成功!");
              this.$router.push("/login");
            } else {
              Toast.fail(res.data.msg);
            }
          });
        }
      },
    },
  };
  </script>
  
  <style lang="scss" scoped>
  .register {
    margin: 20px 10px;
  }
  .title {
    height: 100px;
    text-align: center;
    line-height: 100px;
    font-size: 30px;
  }
  .van-field {
    margin: 30px 0;
    border: 1px solid #ccc;
    border-radius: 20px;
  }
  .btn {
    background: #ccc;
    border-radius: 20px;
    height: 40px;
    line-height: 40px;
    font-weight: bold;
    font-size: 20px;
    text-align: center;
  }
  </style>